<template>
  <div class="custom-carousel" :class="{ simple }">
    <el-carousel ref="carousel" :interval="4000" :type="type" :autoplay="autoplay" :loop="loop" arrow="always"
      indicator-position="none" :height="height" @change="onIndexChange">
      <el-carousel-item v-for="item in list" :key="item">
        <div class="full border-image carousel-image">
          <div class="img-show-container">
            <base64-image v-if="item.imageId" :src="item" class="img-show" />
            <div v-else class="img-show" :style="`background-image: url(${item})`" />
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="switch">
      <span :class="{ disabled: !loop && index <= 0 }" class="switch-btn switch-pre" @click="pre" />
      <span v-if="simple" class="size-14 color-gray flex flex-center">{{ index + 1 }}/{{ total }}</span>
      <span :class="{ disabled: !loop && index >= total - 1 }" class="switch-btn switch-next" @click="next" />
    </div>
  </div>
</template>
<script lang="ts">
import { Options } from "vue-class-component";
import BaseComponent from "./BaseComponent";
import { Prop } from "vue-property-decorator";

@Options({
  name: 'Carousel'
})
export default class Carousel extends BaseComponent {

  index = 0

  @Prop({ default: () => ([]) }) list: Array
  @Prop({ default: '1.8rem' }) height: String
  @Prop({ default: '' }) type: String
  @Prop({ default: true }) autoplay: Boolean
  @Prop({ default: true }) loop: Boolean
  @Prop({ default: false }) simple: Boolean

  pre() {
    this.$refs.carousel.prev()
  }
  next() {
    this.$refs.carousel.next()
  }

  onIndexChange(index) {
    this.index = index
  }

  get total() {
    return this.list?.length || 0
  }
}
</script>

<style lang="scss" scoped>
.custom-carousel {
  position: relative;

  .carousel-image {
    height: 100%;
    padding: 4px 0;
    box-sizing: border-box;

    .img-show-container {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background-color: #1E2735;
      border: 1px solid #36CDFD;
    }

    .img-show {
      width: 100%;
      height: 100%;
      background-position: center;
      box-sizing: border-box;
      background-size: cover;
      border: 8px solid #1e2735;
    }
  }

  &.simple {
    .switch-btn {
      border: none !important;
      background: transparent !important;

      &:not(.disabled):after {
        border-left-color: #666666;
        border-top-color: #666666;
      }
    }
  }

  :deep(.el-carousel__mask) {
    background: transparent;
  }

}

.switch {
  width: 160px;
  display: flex;
  margin: 24px auto;
  justify-content: space-between;

  .switch-btn {
    width: 32px;
    height: 32px;
    position: relative;
    cursor: pointer;
    background: linear-gradient(90deg, #36CDFD60 0%, #36cdfd00 100%);
    border: 1px solid rgba(54, 205, 253, 0.6);

    &.disabled {
      cursor: not-allowed;
      background: #dedede;
      border-color: #dedede;

      &:after {
        border-left-color: #dddddd;
        border-top-color: #dddddd;
      }
    }

    &:not(.disabled):hover {
      border: 1px solid rgba(54, 205, 253, 0.6);
      background: linear-gradient(90deg, #36CDFD 0%, #36cdfd00 100%);
    }

    &:after {
      top: 2px;
      content: '';
      width: 10px;
      height: 10px;
      left: 6px;
      margin-left: 12px;
      position: absolute;
      transform: rotate(-45deg) translateX(-50%);
      border: 2px solid transparent;
      border-left-color: rgba(54, 205, 253, 0.6);
      border-top-color: rgba(54, 205, 253, 0.6);
    }

    &.switch-next:after {
      left: 0;
      transform: rotate(135deg) translateX(50%);
    }
  }

  .switch-pre {}
}

.border-image {
  position: relative;

  &:before,
  &:after {
    content: '';
    height: 4px;
    width: 137px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("/src/assets/images/border/top1.png");
  }

  &:before {
    left: 0;
    top: 0;
  }

  &:after {
    bottom: 0;
    right: 0;
    transform: rotate(180deg);
  }
}

:deep(.el-carousel__arrow) {
  display: none;
}</style>